<template>
  <div>
    <div>
      rust-wasm测试，有输入的wasm在vite中没有找到使用的方式，webpack完全兼容且有ts的提示，非常的方便
    </div>
    <div>
      在低版本谷歌内核中有问题，这个低版本谷歌内核是360浏览器
    </div>
    <div>
      高版本中谷歌就没有这个问题，这个高版本是谷歌浏览器
    </div>
    <el-input-number v-model="value"></el-input-number>
    <el-button
      @click="run"
      :loading="loading"
    >确定</el-button>
    <div>
      js版本的斐波拉数列计算时间：{{jsLong}}
    </div>
    <div>
      wasm版本的斐波拉数列计算时间：{{wasmLong}}
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      value:40,
      jsLong:0,
      wasmLong:0,
      loading:false,
      worker: new Worker(new URL('./runCountWork', import.meta.url),{
        type: 'module'
      })
    }
  },
  methods:{
    run(){
      this.$message.success('开启新的线程计算中')
      this.loading=true
      this.worker.postMessage({
        dir:'run',
        value:this.value
      })
      this.worker.onmessage=(ev)=>{
        const {wasmLong,jsLong} = ev.data
        this.jsLong=jsLong
        this.wasmLong=wasmLong
        this.loading=false
        this.$message.success('计算完成')
      }
    },
  },
  destroyed() {
    console.log('关闭线程')
    this.worker.postMessage({
      dir:'close'
    })
    // this.worker.terminate()
  }
}
</script>

<style scoped lang="scss">

</style>
